<!--
 * @Description: 选择人员
 * @Author: wangwangwang
 * @Date: 2020-08-07 12:02:33
 * @LastEditors: wangwangwang
 * @LastEditTime: 2020-08-18 09:14:39
-->
<template>
  <el-dialog v-dialogDrag width="50%" title="选择人员" :before-close="hanldeClose" :visible.sync="visible">
    <div class="transfer-container">
      <el-row :gutter="10">
        <el-col :span="9">
          <p class="hanlde-title">部门组织:</p>
          <div class="hanlde-container">
            <el-tree v-show="personTypeForm.type==='1'" ref="tree" class="tree-line"  :indent="0"  :expand-on-click-node="false" :data="treeArry" default-expand-all node-key="id" highlight-current :props="defaultProps" @node-click="handleNodeClick"></el-tree>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="visibility: hidden;">1</div>
        </el-col>
        <el-col :span="9">
          <p class="hanlde-title">人员(跟进中的工程数量):</p>
          <div class="hanlde-container">
            <el-radio-group v-model="choisedData">
              <template v-for="item in selectedData">
                <div :key="item.id" style="line-height:30px">
                  <el-radio :label="item">{{item.name}}</el-radio>
                </div>
              </template>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button class="bottom_all_two" @click="hanldeClose">取 消</el-button>
      <el-button class="bottom_all" @click="hanldeSure">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { queryPage as orgQueryPage } from "@/api/basedata/organization";
import { queryPage as userQueryPage } from "@/api/basedata/user";
import { formatTreeData } from "@/utils/utils";
import { getUserInfo } from "@/utils/auth.js";

export default {
  props: ["visible"],
  data() {
    return {
      UserInfo: "",
      personTypeForm: {
        type: "1",
        personType: "1",
      },
      treeArry: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      selectedData: [],
      choisedData: [],
      selectRoles: [],
      rolesData: [],
    };
  },
  async created() {
    this.UserInfo = await getUserInfo();
  },
  methods: {
    /**
     * @Description: 获取所有组织和用户、格式化tree结构
     * @Param:
     * @Author: wangwangwang
     */
    initOrganization() {
      const params = {
        page: 1,
        pageSize: 10000,
      };
      orgQueryPage(params).then((res) => {
        if (res.code === 1001) {
          this.treeArry = formatTreeData(
            res.data.data,
            "id",
            "parentId",
            "children",
            "parent_id"
          );
          if (this.UserInfo.adminStatus == 0) {//非admin账号只显示自己的公司组织
            this.treeArry = [this.findBFS(this.treeArry, this.UserInfo.companyId)]
          }
        }
      });
    },
    findBFS(objects, id) {
      const queue = JSON.parse(JSON.stringify(objects))
      while (queue.length) {
        const o = queue.shift()
        if (o.id == id) return o
        queue.push(...(o.children || []))
      }
    },
    hanldeClose() {
      this.$emit("closeModel");
    },
    hanldeSure() {
      this.$emit("getPerson", this.choisedData);
    },
    handleNodeClick(data) {
      const params = {
        page: 1,
        organizationId: data.id,
        pageSize: 10000,
        userEentrance: "entrance_manager",
      };
      userQueryPage(params).then((res) => {
        if (res.code === 1001) {
          this.selectedData = res.data.data;
        }
      });
    },
  },
  mounted() {
    this.initOrganization();
  },
};
</script>
<style lang="scss" scoped>
.transfer-container {
  .hanlde-title {
    margin-bottom: 10px;
  }
  .hanlde-container {
    border-radius: 5px;
    border: 1px solid #dcdfe6;
    height: 500px;
    overflow: scroll;
    padding: 15px;
  }
}
</style>
